<template>
  <view class="list-page">
    <!-- 顶部返回与占位图标 -->
    <view class="header">
      <uni-icons type="back" size="20" color="#333" @click="goBack" />
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrap">
        <input class="search-input" placeholder="查找充电桩" />
        <uni-icons type="search" size="20" color="#D8D8D8" class="search-icon" />
      </view>
    </view>

    <!-- 筛选 tabs -->
    <view class="filter-tabs">
      <view v-for="(tab, index) in filterTabs" :key="index" :class="['tab', { active: activeFilterTab === index }]" @click="onFilterTabClick(index)">
        {{ tab }}
      </view>
    </view>

    <!-- 列表 -->
    <view class="station-list">
      <view v-for="(item, index) in stations" :key="index" class="station-item" @click="navigateToDetail(item)">
        <view class="thumb"></view>
        <view class="info">
          <view class="title-row">
            <text class="title">{{ item.name }}</text>
            <view class="distance"><uni-icons type="paperplane-filled" size="16" color="#D8D8D8" /><text class="distance-text">{{ item.distance }}</text></view>
          </view>
          <view class="desc-row">
            <text class="desc">{{ item.rating }} 最近充电{{ item.lastCharge }}前 开放中 限时免费停车场</text>
          </view>
          <view class="bottom-row">
            <text class="price">¥{{ item.price }}/度</text>
            <view class="tags">
              <view class="tag-combo" :class="item.type === '快' ? 'fast' : 'slow'">
                <text class="segment left">{{ item.type }}</text>
                <text class="segment right">{{ item.freeText }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 自定义底部导航栏 -->
		<custom-tabbar :current="currentTabIndex" @change="onTabChange" @centerClick="onCenterClick"></custom-tabbar>
</template>

<script setup>
import { ref } from 'vue'
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
const filterTabs = ref(['距离', '价格', '快充', '慢充'])
const activeFilterTab = ref(0)

const stations = ref([
  { name: '新宇建筑楼充电桩场地', distance: '43m', rating: '4.9分', lastCharge: '7分钟', price: '1.7886', type: '快', freeText: '闲12/20' },
  { name: '新宇建筑楼充电桩场地', distance: '43m', rating: '4.9分', lastCharge: '7分钟', price: '1.7886', type: '慢', freeText: '闲12/20' },
  { name: '新宇建筑楼充电桩场地', distance: '43m', rating: '4.9分', lastCharge: '7分钟', price: '1.7886', type: '快', freeText: '闲12/20' },
  { name: '新宇建筑楼充电桩场地', distance: '43m', rating: '4.9分', lastCharge: '7分钟', price: '1.7886', type: '快', freeText: '闲12/20' },
  { name: '新宇建筑楼充电桩场地', distance: '43m', rating: '4.9分', lastCharge: '7分钟', price: '1.7886', type: '快', freeText: '闲12/20' }
])

const onFilterTabClick = (index) => {
  activeFilterTab.value = index
}

const goBack = () => {
  uni.navigateBack()
}

const navigateToDetail = (item) => {
	console.log(item)
  uni.navigateTo({
	url:'/pages/list/detail'
   // url: '/pages/list/detail?name=' + item.name + '&distance=' + item.distance + '&rating=' + item.rating + '&lastCharge=' + item.lastCharge + '&price=' + item.price + '&type=' + item.type + '&freeText=' + item.freeText
  })
}
</script>

<style scoped>
.list-page {
  background-color: #fff;
  min-height: 100vh;
}

.header {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.search-bar {
  padding: 0 16px 8px 16px;
}

.search-input-wrap {
  position: relative;
  background: #f5f5f5;
  border-radius: 22px;
  padding: 10px 40px 10px 16px;
}

.search-input {
  width: 100%;
  font-size: 16px;
}

.search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

.filter-tabs {
  display: flex;
  padding: 10px 16px;
}

.tab {
  margin-right: 20px;
  font-size: 14px;
  color: #666;
}

.tab.active {
  color: #1DCFB7;
  font-weight: 600;
}

.station-list {
  margin-top: 4px;
  overflow-y: auto;
}

.station-item {
  display: flex;
  padding: 20px 16px;
  border-top: 1px solid #eee;
}

.thumb {
  width: 54px;
  height: 54px;
  background: #efefef;
  border-radius: 8px;
  margin-right: 12px;
}

.info {
  flex: 1;
}

.title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

.distance {
  display: flex;
  align-items: center;
}

.distance-text {
  margin-left: 4px;
  font-size: 12px;
  color: #999;
}

.desc-row {
  margin-top: 4px;
}

.desc {
  font-size: 12px;
  color: #888;
}

.bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.price {
  font-size: 16px;
  color: #1CCCB4;
}

.tags {
  display: flex;
  align-items: center;
}

/* 组合胶囊标签：左侧实心，右侧描边 */
.tag-combo {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 4px;
  overflow: hidden;
}

.segment {
  font-size: 12px;
  padding: 2px 10px;
}

.tag-combo.fast {
  border-color: #ff8a47;
}
.tag-combo.fast .segment.left {
  background: #ff8a47;
  color: #fff;
}
.tag-combo.fast .segment.right {
  background: #fff;
  color: #ff8a47;
}

.tag-combo.slow {
  border-color: #1CCCB4;
}
.tag-combo.slow .segment.left {
  background: #1CCCB4;
  color: #fff;
}
.tag-combo.slow .segment.right {
  background: #fff;
  color: #1CCCB4;
}
</style>
